<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack的区分merge的模式</title>
  <!-- 
  在 Webpack 中， `merge`  是指合并不同的配置项，尤其是在使用多个配置文件时。Webpack 提供了不同的合并策略，以便灵活地处理配置。
  1. 合并策略
  Webpack 的合并策略主要有以下几种：

   1.1 对象合并（Object Merge）
  - 描述：对于普通对象，后面的配置会覆盖前面的配置。
  - 示例：
  const configA = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
    },
  };

  const configB = {
    output: {
      filename: 'app.bundle.js', // 覆盖 configA 中的 filename
    },
  };

  const mergedConfig = { ...configA, ...configB };
  // mergedConfig.output.filename 为 'app.bundle.js'
   1.2 数组合并（Array Merge）
  - 描述：对于数组，Webpack 会将两个数组合并，后面的数组会添加到前面的数组中。
  - 示例：
  const configA = {
    plugins: [
      new HtmlWebpackPlugin(),
    ],
  };

  const configB = {
    plugins: [
      new MiniCssExtractPlugin(),
    ],
  };

  const mergedConfig = {
    plugins: [...configA.plugins, ...configB.plugins];
  // mergedConfig.plugins 包含 HtmlWebpackPlugin 和 MiniCssExtractPlugin
   1.3 特殊合并（Special Merge）
  - 描述：对于某些特殊配置项（如  `module.rules` ），Webpack 会进行深度合并，确保所有规则都能被合并。
  - 示例：
  const configA = {
    module: {
      rules: [
        {
          test: /\.js$/,
          use: 'babel-loader',
        },
      ],
    },
  };

  const configB = {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: 'css-loader',
        },
      ],
    },
  };

  const mergedConfig = {
    module: {
      rules: [...configA.module.rules, ...configB.module.rules],
    },
  };
  // mergedConfig.module.rules 包含 babel-loader 和 css-loader
  2. 使用  `webpack-merge`  库

  为了更方便地合并 Webpack 配置，通常会使用  `webpack-merge`  库。这个库提供了更强大的合并功能，可以处理复杂的配置合并。

   示例：
  const { merge } = require('webpack-merge');

  const commonConfig = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
    },
  };

  const devConfig = {
    mode: 'development',
    devtool: 'source-map',
  };

  const prodConfig = {
    mode: 'production',
    optimization: {
      minimize: true,
    },
  };

  const mergedDevConfig = merge(commonConfig, devConfig);
  const mergedProdConfig = merge(commonConfig, prodConfig);
  总结

  - 对象合并：后面的配置覆盖前面的配置。
  - 数组合并：将两个数组合并，后面的数组添加到前面。
  - 特殊合并：对于某些配置项（如  `module.rules` ）进行深度合并。
  - 使用  `webpack-merge` ：可以更灵活地合并复杂的 Webpack 配置。

  cnpm install webpack webpack-cli css-loader less less-loader style-loader postcss-loader postcss-preset-env @babel/plugin-transform-arrow-functions @babel/plugin-transform-block-scoping @babel/preset-env babel-loader @babel/core clean-webpack-plugin html-webpack-plugin vue-loader webpack-merge webpack-dev-server --save-dev

  cnpm install vue
  -->
</head>

<body>

  <noscript>
  <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>

</body>

</html>